<div
	class="flex flex-row pl-4 py-2 gap-2 items-center border rounded-lg shadow overflow-hidden"
	[ngClass]="['bg' + contrast, 'border' + primary]"
>
	<span
		class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none rounded-full"
		[ngClass]="['bg' + primary, 'text' + contrast]"
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-8 w-8"
			viewBox="0 0 20 20"
			fill="currentColor"
		>
			<path
				fill-rule="evenodd"
				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
				clip-rule="evenodd"
			/>
		</svg>
	</span>
	<div class="flex-1 p-2">
		<p class="text-sm" [ngClass]="['text' + defaultInv]">
			Ad obcaecati eaque eum aut, similique perferendis, reprehenderit odit nulla aliquam ex
			nostrum repellat
		</p>
	</div>
	<button type="button" [ngClass]="['text' + plainInv]" class="ml-6 p-2">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4"
			viewBox="0 0 20 20"
			fill="currentColor"
		>
			<path
				fill-rule="evenodd"
				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
				clip-rule="evenodd"
			/>
		</svg>
	</button>
</div>
